<template>
  <grimm-page type="toast-view" title="Toast">
    <template slot="content">
      <grimm-button-group>
        <grimm-button block @click="showToastTime3">Toast - time 3s</grimm-button>
        <grimm-button block @click="showToastTime0">Toast - time 0s</grimm-button>
        <grimm-button block @click="showToastMask">Toast with mask</grimm-button>
        <grimm-button block @click="showToastType('success')">Toast - success</grimm-button>
        <grimm-button block @click="showToastType('error')">Toast - error</grimm-button>
        <grimm-button block @click="showToastType('warning')">Toast - warning</grimm-button>
        <grimm-button block @click="showToastTxt">Toast - txt only</grimm-button>
      </grimm-button-group>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
import GrimmButtonGroup from '../../components/GrimmButtonGroup.vue';
export default {
  methods: {
    showToastTime3() {
      this.toast = this.$createToast({
        time: 3000,
        txt: 'Toast time 3s',
        onTimeout: () => {
          console.log('timeout');
        },
      });
      this.toast.show();
    },
    showToastTime0() {
      this.toast = this.$createToast({
        time: 0,
        txt: 'Toast time 0',
      });
      this.toast.show();
      setTimeout(() => {
        this.toast.hide();
      }, 2000);
    },
    showToastMask() {
      this.toast = this.$createToast({
        txt: 'Loading...',
        mask: true,
      });
      this.toast.show();
    },
    showToastType(type) {
      this.toast = this.$createToast({
        txt: type,
        type: type,
      });
      this.toast.show();
    },
    showToastTxt() {
      this.toast = this.$createToast({
        txt: 'Plain txt',
        type: 'txt',
      });
      this.toast.show();
    },
  },
  components: {
    GrimmPage,
    GrimmButtonGroup,
  },
};
</script>
